<template>
	<view :class="[primarySize()]">
		<view class="container bgf4">
			<view class="bgf authorize_content">
				<button class="header" hover-class="none" @click="onChooseAvatar">
					<image :src="avatar?avatar:'/static/public/avatar.png'" mode="aspectFill" class="head"></image>
					<view class="tips flex-box flex-col flex-center">
						<view>上传</view>
						<view>头像</view>
					</view>
				</button>
				<!-- <view class="title">请确认以下授权信息</view> -->
				<view class="input-box flex-box mt50">
					<view class="fs28">用户昵称</view>
					<input class="flex-grow-1 pl30 tr fs28" type="nickname" v-model="nickname" placeholder="请输入昵称" />
				</view>
			</view>
			<view class="plr30 ptb60">
				<button hover-class="none" class="btn1 ml0" @click="save">保存信息</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				userinfo: '',
				avatar: '',
				nickname: ''
			}
		},
		onReady() {
			uni.setNavigationBarColor({

				frontColor: '#ffffff',

				backgroundColor: this.primaryColor()

			})
		},
		onLoad() {
			this.userinfo = this.$core.getUserinfo();
			this.avatar = this.userinfo.avatar || '';
			this.nickname = this.userinfo.nickname || '';
		},
		methods: {
			onChooseAvatar(e) {
				let page = this;
				uni.chooseImage({
					success: res => {
						let file = res.tempFiles[0];
						page.$core.uploadFile({
							filePath: file.path,
							success(ret, response) {
								page.avatar = ret.data.url
							}
						});
					}
				});
			},
			onNickname(e) {
				if (!e.detail.pass) {
					uni.showToast({
						title: '昵称不合法',
						icon: 'none'
					})
					this.nickname = '';
				}
			},
			save() {
				let page = this;
				let data = {
					'avatar': this.avatar,
					'nickname': this.nickname
				}
				var rule = [{
						name: 'avatar',
						rules: ['require'],
						errorMsg: {
							require: '请上传头像'
						}
					},
					{
						name: 'nickname',
						rules: ['require', 'max:50'],
						errorMsg: {
							require: '请填写昵称',
							max: '昵称最多50个字符'
						}
					},
				];

				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				this.$core.post({
					url: 'xilujob.user/profile',
					data: data,
					success(ret, response) {
						let profile = ret.data.profile;
						let userinfo = page.$core.getUserinfo();
						userinfo.avatar = data.avatar;
						userinfo.nickname = data.nickname;
						page.$core.setUserinfo(userinfo);
						uni.$emit(app.globalData.Events.eventOnUserinfoUpdate, userinfo);
						uni.navigateBack();
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.bd1e1 {
		border-bottom: 1rpx solid #E1E1E1;
	}

	.info_name {
		width: 120rpx;
		white-space: nowrap
	}

	.info_item input {
		height: 100rpx;
		line-height: 100rpx;
		text-align: right
	}

	.info_item picker {
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
		padding-right: 15rpx
	}

	.ml0 {
		margin-left: 0
	}

	.info_item:nth-last-child(1) {
		border-bottom: 0;
	}

	.head {
		margin-right: 26rpx;
		width: 128rpx;
		height: 128rpx;
		border: 4rpx solid var(--normal);
		border-radius: 50%;
	}

	.authorize_content {
		padding: 120rpx 75rpx 40rpx;
		box-sizing: border-box;
	}

	.authorize_content .header {
		width: 201rpx;
		height: 201rpx;
		/* border: 6rpx solid #fff; */
		/* box-shadow: 0px 3rpx 8rpx 0px rgba(213, 213, 213, 0.4); */
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
	}

	.authorize_content .header .tips {
		width: 201rpx;
		height: 201rpx;
		border-radius: 50%;
		color: #D8D8D8;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		top: 0;
		left: 0;
		font-size: 36rpx;
		text-align: center;
	}

	.authorize_content .header image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.authorize_content .title {
		font-size: 32rpx;
		color: #333333;
		padding-top: 50rpx;
		margin-top: 40rpx;
		/* border-top: 1rpx solid #EDEDED; */
		text-align: center;
	}

	.authorize_content .info {
		font-size: 28rpx;
		color: #999999;
		padding-top: 30rpx;
		padding-bottom: 70rpx;
		text-align: center;
	}

	.authorize_content button {
		width: 600rpx;
		margin-bottom: 40rpx;
	}

	.input-box {
		padding: 0 50rpx;
		height: 80rpx;
		border: 1rpx solid #cdcdcd;
		border-radius: 40rpx;
	}

	.input-box+.input-box {
		margin-top: 50rpx;
	}

	.input-box image {
		display: block;
		width: 30rpx;
		height: 44rpx;
	}

	.ptb60 {
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}

	.btn1 {
		height: 95rpx;
		line-height: 95rpx;
		font-size: 32rpx;
	}
</style>